<template>
  <div>
    <h1>son</h1>
    <p>{{msg}}</p>
    <!-- 如果我们想改props怎么办？下面： -->
    <p>加工后的数据：{{msg2}}</p>
    <!-- mixin -->
    <button @click='this.showData'>test</button>
    <button @click='handlePlugins'>测试plugin挂载到原型的方法</button>
    <p>测试过滤器{{number|double}}</p>
    <div class="fa">自定义指令<span
        v-tentimes='number'
        class="son"
      ></span></div>
    <!-- <div>完整版自定义指令<input v-focusbind='number' /></div> -->
    <button @click='update_number'>改变number</button>
    <button @click='send_msg_from_son'>儿子给父亲传值 类似props方式</button>
    <button @click='send_msg_from_son2'>第二种 儿子给父亲传值 自定义事件</button>
    <button @click='unbind'>解绑自定义事件</button>
  </div>
</template>

<script>
import { mixin } from "../mixin";
export default {
  name: "Son",
  data() {
    return {
      // 因为props是只读属性。并且props优先级大于data。下面两种写法都可以哦
      //   msg2: this.$props.msg + "Wong",
      msg2: this.msg + "Wong",
      number: 55,
    };
  },
  props: ["msg", "get_son_msg"],
  //   不同于props，mixin不带引号
  mixins: [mixin],
  methods: {
    handlePlugins() {
      this.hello();
    },
    update_number() {
      this.number++;
    },
    send_msg_from_son() {
      console.log("propsFromSon");
      this.get_son_msg(this.number);
    },
    send_msg_from_son2() {
      // 儿子组件调用父亲组件的自定义方法，并且传值给父亲
      this.$emit("get_son_msg2", this.number, 1, 2, 3, 4, 5);
    },
    unbind() {
      this.$off(["get_son_msg2"]);
    },
  },
  // 局部过滤器
  filters: {
    double(value) {
      return value * 2;
    },
  },
  // 自定义指令
  directives: {
    //形参，第一个是用到这个指令的DOM元素，第二个
    // 什么时候调用这个方法？这个标签只要渲染就会调用。
    tentimes(element, binding) {
      // console.log(element, binding);//binding是一个对象 name: "tentimes", rawName: "v-tentimes", value: 55, expression: "number", modifiers: {…}, …
      // 原生JS操作
      element.innerText = binding.value * 10;
    },
    // 页面刚渲染就可以聚焦这里，然后绑定的数据只要更新，这个标签里面的value也会更新
    focusbind: {
      //指令与元素绑定成功时候调用。bind,inserted,update是固定的名字，里面的参数是形参
      bind(element, binding) {
        console.log("bind");
        element.value = binding.value * 10;
      },
      //指令绑定的标签插入到页面时候
      inserted(element, binding) {
        console.log("inserted");
        //focus这个聚焦这个操作必须要节点已经创建好了，才可以使用这个方法聚焦。也就是说上面的自定义指令简单写法无法完成这个功能
        element.focus();
      },
      update(e, b) {
        e.value = b.value * 10;
      },
    },
  },
  mounted() {
    // 接收非父子通信的信息
    this.$bus.$on("msg_between_sons", (...msg) => {
      console.log("between", msg);
    });
  },
  // 临死前
  beforeDestroy() {
    // 千万别不传参数，不传参数就意味着把公交车上所有事件全销毁了，这就有可能销毁了其他开发者定义的公交车事件
    this.$bus.$off("msg_between_sons");
  },
};
</script>

<style scoped lang='css'>
.fa .son{background-color: orange;}
</style>